<template>
  <div class="mainmargin">
    <div class="footers">
      <div class="fanh">
        <img
          src="https://cdn7.axureshop.com/demo/1564251/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1032.png"
          @click="goback"
        />
      </div>
      <!-- 以下为演出头部 -->
      <div class="t1">
        <div class="detilhead">
          <div class="img">
            <img :src="showDetil.img" alt="" class="img1" />
          </div>

          <div class="text">
            <div class="concertName">
              <span>
                {{ showDetil.concertName }}
              </span>
            </div>
            <div class="type">{{ showDetil.type }}</div>
            <div class="univalence">¥ {{ showDetil.univalence }}</div>

            <div class="time">{{ showDetil.holdingTime }}</div>
          </div>
          <!-- 以下为演出地点 -->
          <div class="location">
            <span>{{ showDetil.location }}</span>
          </div>
        </div>
      </div>
      <div class="youhuiquan">优惠券</div>
    </div>
    <div class="xia">
      <!-- 以下为演出简介 -->
      <div class="jianjie">
        <div class="biaoti">演出简介</div>
        <div class="j2">{{ showDetil.intro }}</div>
      </div>
      <!-- 以下为购票须知 -->
      <div class="xuzhi">
        <div class="biaoti">购票须知</div>
        <h1>限购说明</h1>
        <p>每人限购4张</p>
        <h1>退换策略</h1>
        <p>由于票据的时效性，所有票品一经出售不退不换</p>
        <h1>其他说明</h1>
        <p>1.2m以下儿童入场需购买全票且签署免责协议。</p>
      </div>
      <!-- 以下为演出评价 -->
      <div>
        <div class="biaoti pingjia">演出评价</div>
        <span></span>
      </div>
      <!-- 以下为为你推荐 -->
      <div>
        <div class="biaoti pingjia">为你推荐</div>
      </div>
      <!-- {{showDetil}} -->
    </div>
  </div>
</template>

<script>
import homeTitle from '../homepage/ul/homeTitle.vue'
import { showdetilApi } from "@/api/showdetilApi.js";
export default {
  components: {
    homeTitle,
  },
  data() {
    return {
      currentId: null,
      showDetil: {},
      
    };
  },
  created() {
    this.currentId = this.$route.params.id;
    this.getShowDetil();
  },
  methods: {
    async getShowDetil() {
      let res = await showdetilApi(this.currentId);
      this.showDetil = res;
    },
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.mainmargin {
  background-color: #f7f8fd;
  .footers {
    clear: both;
    overflow: hidden;
    height: 340px;
  }
  // background-color: #e32b2b;
  .fanh {
    margin-left: 2%;
    margin-top: 2%;
  }
  .img {
    // background-color: #152c89;
    width: 160px;
    height: 194px;
    float: left;
    .img1 {
      margin: 5%;
      width: 140px;
      height: 175px;
    }
  }
  .t1 {

    margin-left: 5%;
    height: 230px;
    .text {
      height: 194px;
      // background-color: #1e8334;
      float: left;
      margin-left: 6px;
      // flex-direction: column;
      // justify-content: space-between;
      .concertName {
        width: 180px;
        height: 70px;
        // background-color: #fff;
        margin-top: 10px;
        span {
          font-size: 18px;
        }
      }
      .type {
        // background-color: #d03333;
        line-height: 44px;
        font-size: 10px;
        color: #c5c5c5;
      }
      .univalence {
        // background-color: #fff;
        font-size: 13px;
        font-weight: 850;
        margin-top: 15px;
      }
      .time {
        // background-color: #28d380;
        font-size: 10px;
        line-height: 20px;
        color: #c5c5c5;
        margin-top: 15px;
      }
    }
  }
  .location {
    // background-color: rgba(255, 255, 255,0);
    // margin-top: 20px;
    span {
      display: block;
      margin-top: 15px;
      font-size: 15px;
      float: left;
    }
  }
}
.youhuiquan {
  width: 340px;
  height: 60px;
  background-color: #ff5b5b;
  float: left;
  margin: 20px 5% 0 5%;
  border-radius: 5px;
}
.xia {
  margin-top: 20px;
  width: 100%;
  background-color: #ffffff;
  border-radius: 15px 15px 0 0;
  .jianjie {
    width: 340px;
    margin: 0 auto;
    overflow: hidden;
    // .j1 {
    //   font-size: 15px;
    //   margin-top: 30px;
    // }
    .j2{
      margin-top: 20px;
      font-size: 13px;
      line-height: 23px;
      color: #c5c5c5;
    }
  }
  .biaoti {
    font-size: 15px;
    margin-top: 30px;
  }
  .xuzhi{
     width: 340px;
     margin: 0 auto;
    h1{
      font-size: 13px;
    }
    p{
      font-size: 10px;
      color: #c5c5c5;
    }
   } 
   //演出评价
   .pingjia{
    width: 340px;
     margin: 0 auto;
   }
   //为你推荐
   .tuijian{
    width: 340px;
     margin: 0 auto;
   }
}
</style>